<template>
  <div id='video03'>
    <template v-if="vipRootObj[7][39].owner">
      <p class="title mt_30" v-if="!loading"><img src="@/assets/meng/video03_01.png"><span>商品</span></p>
      <section v-for="(item, index) in table_data"
               :key="'table' + index">
        <div class="shop ">
          <img :src='item.proLogo'>
          <p>{{item.proTitle}}</p>
          <section>
            <p>￥{{item.proPrice}}</p>
            <p>售价</p>
          </section>
          <section>
            <p>{{ format_num(item.volume) }}</p>
            <p>销量</p>
          </section>
          <section>
            <button @click="go_to_page01(item.proId)">查看详情</button>
            <p v-show="item.show"
               @click="show_list(index,false,item.proId)">商品相关视频 <i class="el-icon-arrow-up"></i></p>
            <p v-show="!item.show"
               @click="show_list(index,true,item.proId)">商品相关视频 <i class="el-icon-arrow-down"></i></p>
          </section>
        </div>
        <video03_table @returnBack="show_pop"
                       v-if="item.show"
                       :id="shop_id" />
      </section>
      <div v-loading="loading"
           v-if="loading"
           class="loading"
           element-loading-text="拼命加载中..."
           element-loading-spinner="el-icon-loading"></div>
      <p class="no_data"
         v-if="!loading&&table_data.length==0">目前没有可以查看的数据哟~</p>
    </template>
    <!-- <div class="permissions_img"
         v-else>
      <p>以下为示例图,该功能为{{lowestRoot}}及以上会员可用,请<span @click="$router.push('/talent_main/buy')">升级会员</span>使用</p>
      <img src='@/assets/meng/l3.png'>
      <img src='@/assets/wang/talentCompare/exampleIcon.png'>
    </div> -->
    <div class="notVipBoxNewWl" v-else>
      <img src="@/assets/meng/l3.png" alt="" class="egBgImg" />
      <div class="dialog_pay_box">
        <payVip routerName="audience" :lowestVipNum="vipRootObj[7][39].ownerMinLevel" :isResize="false" />
      </div>
    </div>    
  </div>
</template>
<script>
import video03_table from './video03_table'
export default {
  name: 'video03',
  components: { video03_table },
  data() {
    return {
      loading: true,
      permissions: 1,
      table_data: [],
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    }
  },
  props: ['id','lowestRoot'],
  computed: {},
  created() {
    this.get_data()
  },
  mounted() {},
  methods: {
    show_pop(parm) {
      this.$emit('returnBack', parm)
    },
    show_list(index, flag, id) {
      this.shop_id = id
      this.$set(this.table_data[index], 'show', flag)
    },
    get_data() {
      this.loading = true
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/product/find',
        params: {
          awemeId: that.id,
          pageIndex: 1,
          pageSize: 99999999,
        },
      })
        .then((response) => {
          this.loading = false
          if (response.data.code == 1003) {
            this.permissions = 0
          }
          if (response.data.code == 0) {
            this.table_data = response.data.data.map((element) => {
              element.show = false
              return element
            })

            // console.log(this.table_data)
          }
        })
        .catch((error) => {
          this.loading = false
          console.log(error)
        })
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      })
      window.open(router.href, '_blank')
    },
  },
}
</script>
<style scoped lang='less'>
.loading{
    margin-top: 100px;
}
.no_data {
   font-size: 16px;
  text-align: center;
  color: #fd7f2c;
  line-height: 439px;
}
.shop {
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: 27px;
  > section:nth-child(5) {
    margin-left: 230px;
    i {
      font-weight: 600;
    }
    p {
      font-size: 14px;
      color: #fd7f2c;
      text-align: center;
      margin-top: 10px;
      cursor: pointer;
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
    }
    > button {
      width: 88px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      color: #ffffff;
      line-height: 30px;
    }
  }
  > section:nth-child(3) {
    margin-right: 40px;
    margin-left: 74px;
  }
  > section:nth-child(3),
  > section:nth-child(4) {
    width: 200px;
    > p:first-child {
      font-family: DINAlternate-Bold;
      font-size: 22px;
      color: #fd7f2c;
      margin-bottom: 8px;
      white-space: nowrap;
    }
    > p:last-child {
      font-size: 14px;
      white-space: nowrap;
      color: #888888;
    }
  }
  > p:nth-child(2) {
    font-size: 16px;
    font-weight: 600;
    line-height: 25px;
    color: #222222;
    width: 281px;
    word-break: break-all;
    text-align: left;
  }
  > img {
    border: 1px solid #e5e5e5;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 11px;
    box-sizing: border-box;
  }
}
.title {
  img {
    width: 16px;
    vertical-align: -2px;
    margin-right: 9px;
  }
  span {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
}
#video03 {
  width: 100%;
}
</style>